<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="物料编码
" prop="itemCode">
        <el-input
          v-model="queryParams.itemCode"
          placeholder="请输入物料编码
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料名称
" prop="ietmName">
        <el-input
          v-model="queryParams.ietmName"
          placeholder="请输入物料名称
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料类型
" prop="itemType">
        <el-select v-model="queryParams.itemType" placeholder="请选择物料类型
" clearable>
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="规格型号
" prop="itemSpec">
        <el-input
          v-model="queryParams.itemSpec"
          placeholder="请输入规格型号
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="提交数量
" prop="itemNum">
        <el-input
          v-model="queryParams.itemNum"
          placeholder="请输入提交数量
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="单位
" prop="unit">
        <el-input
          v-model="queryParams.unit"
          placeholder="请输入单位
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料单价元(KG/L)
" prop="price">
        <el-input
          v-model="queryParams.price"
          placeholder="请输入物料单价元(KG/L)
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="单价-价格表(KG/L)
" prop="priceUnit">
        <el-input
          v-model="queryParams.priceUnit"
          placeholder="请输入单价-价格表(KG/L)
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="单价-bom" prop="priceBom">
        <el-input
          v-model="queryParams.priceBom"
          placeholder="请输入单价-bom"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="合计物料成本元(预估)
" prop="totalPrice">
        <el-input
          v-model="queryParams.totalPrice"
          placeholder="请输入合计物料成本元(预估)
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="报废类型
" prop="scrapType">
        <el-select v-model="queryParams.scrapType" placeholder="请选择报废类型
" clearable>
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="报废原因
" prop="reason">
        <el-input
          v-model="queryParams.reason"
          placeholder="请输入报废原因
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="品质部审核状态
" prop="qcStatus">
        <el-select v-model="queryParams.qcStatus" placeholder="请选择品质部审核状态
" clearable>
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="品质部审核人
" prop="qcName">
        <el-input
          v-model="queryParams.qcName"
          placeholder="请输入品质部审核人
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="品质部审核人id" prop="qcNameId">
        <el-input
          v-model="queryParams.qcNameId"
          placeholder="请输入品质部审核人id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审核人所属部门
" prop="qcDept">
        <el-input
          v-model="queryParams.qcDept"
          placeholder="请输入审核人所属部门
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审核人所属部门id" prop="qcDeptId">
        <el-input
          v-model="queryParams.qcDeptId"
          placeholder="请输入审核人所属部门id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="品质部审核时间
" prop="qcTime">
        <el-input
          v-model="queryParams.qcTime"
          placeholder="请输入品质部审核时间
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="财务部成本核对
" prop="fdCostCheck">
        <el-input
          v-model="queryParams.fdCostCheck"
          placeholder="请输入财务部成本核对
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="财务部成员" prop="fdName">
        <el-input
          v-model="queryParams.fdName"
          placeholder="请输入财务部成员"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="财务部成员id" prop="fdNameId">
        <el-input
          v-model="queryParams.fdNameId"
          placeholder="请输入财务部成员id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="财务部审核人部门" prop="fdDept">
        <el-input
          v-model="queryParams.fdDept"
          placeholder="请输入财务部审核人部门"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="财务部审核人部门id" prop="fdDeptId">
        <el-input
          v-model="queryParams.fdDeptId"
          placeholder="请输入财务部审核人部门id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="财务部审核时间
" prop="feTime">
        <el-input
          v-model="queryParams.feTime"
          placeholder="请输入财务部审核时间
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="复核状态
" prop="reCheckStatus">
        <el-select v-model="queryParams.reCheckStatus" placeholder="请选择复核状态
" clearable>
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="复核时间
" prop="reCheckTime">
        <el-input
          v-model="queryParams.reCheckTime"
          placeholder="请输入复核时间
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="复核人
" prop="reCheckName">
        <el-input
          v-model="queryParams.reCheckName"
          placeholder="请输入复核人
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="复核人id" prop="reCheckNameId">
        <el-input
          v-model="queryParams.reCheckNameId"
          placeholder="请输入复核人id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="复核人所属部门
" prop="reCheckDept">
        <el-input
          v-model="queryParams.reCheckDept"
          placeholder="请输入复核人所属部门
"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="复核人所属部门id" prop="reCheckDeptId">
        <el-input
          v-model="queryParams.reCheckDeptId"
          placeholder="请输入复核人所属部门id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['mes:pro:scrap:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['mes:pro:scrap:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['mes:pro:scrap:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['mes:pro:scrap:export']"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-refresh"
              size="mini"
              @click="handleSync"
             v-hasPermi="['mes:pro:scrap:sync']"
            >数据同步</el-button>
            </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="listList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="scrapId" />
      <el-table-column label="唯一值_id" align="center" prop="wlbfId" />
      <el-table-column label="物料编码
" align="center" prop="itemCode" />
      <el-table-column label="物料名称
" align="center" prop="ietmName" />
      <el-table-column label="物料类型
" align="center" prop="itemType" />
      <el-table-column label="规格型号
" align="center" prop="itemSpec" />
      <el-table-column label="提交数量
" align="center" prop="itemNum" />
      <el-table-column label="单位
" align="center" prop="unit" />
      <el-table-column label="物料单价元(KG/L)
" align="center" prop="price" />
      <el-table-column label="单价-价格表(KG/L)
" align="center" prop="priceUnit" />
      <el-table-column label="单价-bom" align="center" prop="priceBom" />
      <el-table-column label="合计物料成本元(预估)
" align="center" prop="totalPrice" />
      <el-table-column label="报废类型
" align="center" prop="scrapType" />
      <el-table-column label="报废原因
" align="center" prop="reason" />
      <el-table-column label="拍照图片" align="center" prop="picture" />
      <el-table-column label="品质部审核状态
" align="center" prop="qcStatus" />
      <el-table-column label="品质部审核人
" align="center" prop="qcName" />
      <el-table-column label="品质部审核人id" align="center" prop="qcNameId" />
      <el-table-column label="审核人所属部门
" align="center" prop="qcDept" />
      <el-table-column label="审核人所属部门id" align="center" prop="qcDeptId" />
      <el-table-column label="品质部审核时间
" align="center" prop="qcTime" />
      <el-table-column label="财务部成本核对
" align="center" prop="fdCostCheck" />
      <el-table-column label="财务部成员" align="center" prop="fdName" />
      <el-table-column label="财务部成员id" align="center" prop="fdNameId" />
      <el-table-column label="财务部审核人部门" align="center" prop="fdDept" />
      <el-table-column label="财务部审核人部门id" align="center" prop="fdDeptId" />
      <el-table-column label="财务部审核时间
" align="center" prop="feTime" />
      <el-table-column label="复核状态
" align="center" prop="reCheckStatus" />
      <el-table-column label="复核时间
" align="center" prop="reCheckTime" />
      <el-table-column label="复核人
" align="center" prop="reCheckName" />
      <el-table-column label="复核人id" align="center" prop="reCheckNameId" />
      <el-table-column label="复核人所属部门
" align="center" prop="reCheckDept" />
      <el-table-column label="复核人所属部门id" align="center" prop="reCheckDeptId" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['mes:pro:scrap:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['mes:pro:scrap:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改【请填写功能名称】对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="物料编码
" prop="itemCode">
          <el-input v-model="form.itemCode" placeholder="请输入物料编码
" />
        </el-form-item>
        <el-form-item label="物料名称
" prop="ietmName">
          <el-input v-model="form.ietmName" placeholder="请输入物料名称
" />
        </el-form-item>
        <el-form-item label="物料类型
" prop="itemType">
          <el-select v-model="form.itemType" placeholder="请选择物料类型
">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="规格型号
" prop="itemSpec">
          <el-input v-model="form.itemSpec" placeholder="请输入规格型号
" />
        </el-form-item>
        <el-form-item label="提交数量
" prop="itemNum">
          <el-input v-model="form.itemNum" placeholder="请输入提交数量
" />
        </el-form-item>
        <el-form-item label="单位
" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入单位
" />
        </el-form-item>
        <el-form-item label="物料单价元(KG/L)
" prop="price">
          <el-input v-model="form.price" placeholder="请输入物料单价元(KG/L)
" />
        </el-form-item>
        <el-form-item label="单价-价格表(KG/L)
" prop="priceUnit">
          <el-input v-model="form.priceUnit" placeholder="请输入单价-价格表(KG/L)
" />
        </el-form-item>
        <el-form-item label="单价-bom" prop="priceBom">
          <el-input v-model="form.priceBom" placeholder="请输入单价-bom" />
        </el-form-item>
        <el-form-item label="合计物料成本元(预估)
" prop="totalPrice">
          <el-input v-model="form.totalPrice" placeholder="请输入合计物料成本元(预估)
" />
        </el-form-item>
        <el-form-item label="报废类型
" prop="scrapType">
          <el-select v-model="form.scrapType" placeholder="请选择报废类型
">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="报废原因
" prop="reason">
          <el-input v-model="form.reason" placeholder="请输入报废原因
" />
        </el-form-item>
        <el-form-item label="拍照图片" prop="picture">
          <el-input v-model="form.picture" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="品质部审核状态
">
          <el-radio-group v-model="form.qcStatus">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="品质部审核人
" prop="qcName">
          <el-input v-model="form.qcName" placeholder="请输入品质部审核人
" />
        </el-form-item>
        <el-form-item label="品质部审核人id" prop="qcNameId">
          <el-input v-model="form.qcNameId" placeholder="请输入品质部审核人id" />
        </el-form-item>
        <el-form-item label="审核人所属部门
" prop="qcDept">
          <el-input v-model="form.qcDept" placeholder="请输入审核人所属部门
" />
        </el-form-item>
        <el-form-item label="审核人所属部门id" prop="qcDeptId">
          <el-input v-model="form.qcDeptId" placeholder="请输入审核人所属部门id" />
        </el-form-item>
        <el-form-item label="品质部审核时间
" prop="qcTime">
          <el-input v-model="form.qcTime" placeholder="请输入品质部审核时间
" />
        </el-form-item>
        <el-form-item label="财务部成本核对
" prop="fdCostCheck">
          <el-input v-model="form.fdCostCheck" placeholder="请输入财务部成本核对
" />
        </el-form-item>
        <el-form-item label="财务部成员" prop="fdName">
          <el-input v-model="form.fdName" placeholder="请输入财务部成员" />
        </el-form-item>
        <el-form-item label="财务部成员id" prop="fdNameId">
          <el-input v-model="form.fdNameId" placeholder="请输入财务部成员id" />
        </el-form-item>
        <el-form-item label="财务部审核人部门" prop="fdDept">
          <el-input v-model="form.fdDept" placeholder="请输入财务部审核人部门" />
        </el-form-item>
        <el-form-item label="财务部审核人部门id" prop="fdDeptId">
          <el-input v-model="form.fdDeptId" placeholder="请输入财务部审核人部门id" />
        </el-form-item>
        <el-form-item label="财务部审核时间
" prop="feTime">
          <el-input v-model="form.feTime" placeholder="请输入财务部审核时间
" />
        </el-form-item>
        <el-form-item label="复核状态
">
          <el-radio-group v-model="form.reCheckStatus">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="复核时间
" prop="reCheckTime">
          <el-input v-model="form.reCheckTime" placeholder="请输入复核时间
" />
        </el-form-item>
        <el-form-item label="复核人
" prop="reCheckName">
          <el-input v-model="form.reCheckName" placeholder="请输入复核人
" />
        </el-form-item>
        <el-form-item label="复核人id" prop="reCheckNameId">
          <el-input v-model="form.reCheckNameId" placeholder="请输入复核人id" />
        </el-form-item>
        <el-form-item label="复核人所属部门
" prop="reCheckDept">
          <el-input v-model="form.reCheckDept" placeholder="请输入复核人所属部门
" />
        </el-form-item>
        <el-form-item label="复核人所属部门id" prop="reCheckDeptId">
          <el-input v-model="form.reCheckDeptId" placeholder="请输入复核人所属部门id" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listList, getList, delList, addList, updateList ,syncScrapList} from "@/api/mes/pro/scrap";

export default {
  name: "List",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      listList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        itemCode: null,        ietmName: null,        itemType: null,        itemSpec: null,        itemNum: null,        unit: null,        price: null,        priceUnit: null,        priceBom: null,        totalPrice: null,        scrapType: null,        reason: null,        picture: null,        qcStatus: null,        qcName: null,        qcNameId: null,        qcDept: null,        qcDeptId: null,        qcTime: null,        fdCostCheck: null,        fdName: null,        fdNameId: null,        fdDept: null,        fdDeptId: null,        feTime: null,        reCheckStatus: null,        reCheckTime: null,        reCheckName: null,        reCheckNameId: null,        reCheckDept: null,        reCheckDeptId: null      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      listList(this.queryParams).then(response => {
        this.listList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        scrapId: null,        wlbfId: null,        itemCode: null,        ietmName: null,        itemType: null,        itemSpec: null,        itemNum: null,        unit: null,        price: null,        priceUnit: null,        priceBom: null,        totalPrice: null,        scrapType: null,        reason: null,        picture: null,        qcStatus: "0",        qcName: null,        qcNameId: null,        qcDept: null,        qcDeptId: null,        qcTime: null,        fdCostCheck: null,        fdName: null,        fdNameId: null,        fdDept: null,        fdDeptId: null,        feTime: null,        reCheckStatus: "0",        reCheckTime: null,        reCheckName: null,        reCheckNameId: null,        reCheckDept: null,        reCheckDeptId: null      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.scrapId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加【请填写功能名称】";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const scrapId = row.scrapId || this.ids
      getList(scrapId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改【请填写功能名称】";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.scrapId != null) {
            updateList(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addList(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const scrapIds = row.scrapId || this.ids;
      this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + scrapIds + '"的数据项？').then(function() {
        return delList(scrapIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 同步数据按钮操作 */
    handleSync() {
            if(this.loading){
              this.$modal.message("正常进行中，请不要重复点击...")
            }
            this.loading = true;
            this.$modal.confirm('是否确认同步数据？').then(function() {
              return syncScrapList();
            }).then(() => {
              this.getList();
              this.$modal.msgSuccess("同步成功");
            }).catch(() => {});
          },
    /** 导出按钮操作 */
    handleExport() {
      this.download('mes/pro/scrap/export', {
        ...this.queryParams
      }, `list_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
